<template>
    <div class="center-view">
        <div
            class="avatar"
            data-enter-time="1608645908"
            data-click-fun="track_f_737069"
        >
            <img
                src="//img02.yiguo.com/e/web/150703/00781/140145/no-pic.jpg"
                class="avator-icon"
                v-if="!userInfo.headIcon"
            />
            <img class="avator-icon" :src="userInfo.headIcon" v-if="userInfo.headIcon" alt="">
            <div class="nick-name" v-if="!userInfo.userId"   @click="gotoLogin" >
                登录/注册
            </div>
            <div class="nick-name" v-if="userInfo.userId" >
                {{userInfo.userId}}
            </div>
        </div>
        <ul class="my-order-tab">
            <li data-enter-time="1608645908" data-click-fun="track_f_192924">
                <img
                    src=""
                    width="26px"
                    height="26px"
                    alt=""
                />
                <span
                    class="mint-badge is-primary is-size-small"
                    style="display: none;"
                    >0
                </span>
                <div class="common-p">卡包余额</div>
            </li>
            <li data-enter-time="1608645908" data-click-fun="track_f_128457">
                <img
                    src=""
                    width="26px"
                    height="26px"
                    alt=""
                />
                <div class="common-p">悠币</div>
            </li>
        </ul>
        <!---->
        <van-grid class="select"  :column-num="5" >
            <van-grid-item icon="https://img07.yiguoimg.com/d/web/180608/01261/105825/unpaid.png" text="待支付" />
            <van-grid-item icon="https://img07.yiguoimg.com/d/web/180608/01261/105825/take.png" text="待收货" />
            <van-grid-item icon="https://img05.yiguoimg.com/d/web/180608/01261/105825/evaluate.png" text="评价送悠币" />
            <van-grid-item icon="https://img06.yiguoimg.com/d/web/180608/01261/105825/changing.png" text="在线退换货" />
            <van-grid-item icon="https://img07.yiguoimg.com/d/web/180315/01315/162344/allorder.png" text="全部订单" />
        </van-grid>
        <!---->
        <div class="testlist">
            <van-grid>
                <van-grid-item icon="https://img07.yiguoimg.com/d/web/181029/00591/155051/coupons.png" text="优惠劵" />
                <van-grid-item icon="https://img06.yiguoimg.com/d/web/181029/00591/155051/yellowcard.png" text="充值卡" />
                <van-grid-item icon="https://img07.yiguoimg.com/d/web/181029/00591/155051/delivery.png" text="提货券" />
                <van-grid-item icon="https://img07.yiguoimg.com/d/web/181029/00591/155051/address.png" text="收货地址" />
            </van-grid>
            <van-grid>
                <van-grid-item icon="https://img06.yiguoimg.com/d/web/181029/00591/155051/help.png" text="帮助中心" />
                <van-grid-item icon="https://img02.yiguo.com/e/web/130101/app/icon/usercenter/box@3x.png" text="我的团购" />
                <van-grid-item icon="https://img06.yiguoimg.com/d/web/181121/00591/143839/account-icon.png" text="账户余额" />
                <van-grid-item icon="https://img07.yiguoimg.com/d/web/181029/00591/155051/service.png" text="在线客服" />
            </van-grid>
        </div>
    </div>
</template>



<script>
import Vue from 'vue';
import { Grid, GridItem } from 'vant';

Vue.use(Grid);
Vue.use(GridItem);


export default {
    methods:{
        gotoLogin(){
            this.$router.push("/login");
        },
    },
    data(){
        return{
            userInfo:{}
        }
    },
    created(){
        let jwt = this.$store.state.global._token;
        if(jwt){
            this.$http.get("http://127.0.0.1:2004/backend/get_user_info").then((ret) => (this.userInfo = ret.data));
        }
    }
};
</script>

<style lang="scss" scoped>
.center-view {
    position: relative;
    top: 0;
    right: 0;
    left: 0;
    font-size: 15px;
    background: #f4f4f4;
    margin-bottom: 59px;
}
.center-view .avatar {
    text-align: center;
    margin-top: -60px;
    height: 135px;
    padding-left: 22px;
    padding-top: 60px;
    background: url(https://img06.yiguoimg.com/d/web/180517/01262/143351/bgimg.jpg);
    background-size: cover;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
}
.center-view .avatar .avator-icon {
    width: 63px;
    height: 63px;
    border-radius: 35px;
    margin-right: 20px;
    border: 2px solid #fff;
}
.center-view .avatar .nick-name {
    font-size: 16px;
}
.center-view .my-order-tab {
    width: 99%;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    font-size: 13px;
    padding: 0;
    height: 79px;
    background: #fff;
    margin-bottom: 10px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid rgb(214, 214, 214);
    margin-top: 10px;
}
.center-view .my-order-tab li {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    list-style: none;
}
.select{
    border: 1px solid rgb(224, 224, 224);
}
.testlist{
    margin-top: 10px;
    border: 1px solid rgb(224, 224, 224);
}


</style>

